<template>
  <headPage :tabsIndex="0"></headPage>
  <div class="boxContent" v-loading="loading">
    <div class="main_box">
      <div class="student_list">
        <vue3-seamless-scroll
          v-model="scroll1"
          direction="left"
          :limitScrollNum="4"
          :hover="true"
          :singleLine="true"
          :copyNum="2"
          :list="message_list"
          class="student_list_scroll"
        >
          <div
            class="student_list_item"
            v-for="(item, index) in message_list"
            :key="index"
          >
            {{ item.biaoti }}
          </div>
        </vue3-seamless-scroll>
      </div>

      <div class="swiper_view">
        <div class="swiper_left">
          <el-carousel
            v-if="banner_list.length > 0"
            trigger="click"
            arrow="always"
            :interval="5000"
            height="240"
          >
            <el-carousel-item v-for="(item, index) in banner_list" :key="index">
              <img :src="item.thumb" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="swiper_right">
          <div class="swiper_right_1" @click="goNews">
            <img src="../../assets/home/9.png" alt="" />
            <div class="swiper_right_1_1">校园新闻</div>
            <div class="swiper_right_1_2">more</div>
          </div>
          <div class="swiper_right_news">
            <vue3-seamless-scroll
              v-model="scroll2"
              direction="up"
              :limitScrollNum="4"
              :hover="true"
              :copyNum="2"
              :list="xinwen_list"
              class="news_list_scroll"
            >
              <div
                class="news_list_item"
                v-for="(item, index) in xinwen_list"
                :key="index"
                @click="goNewsDetails(item.aid)"
              >
                <div class="news_list_item_le">{{ item.dongtaibiaoti }}</div>
                <div class="news_list_item_ri">{{ item.create_time }}</div>
              </div>
            </vue3-seamless-scroll>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="main_box box_bottom">
    <!-- 开设专业 -->
    <div class="major">
      <div class="title_infos">
        <div class="title_info_le">开设专业</div>
        <div class="title_info_ri" @click="seeMajor">
          <span>查看更多</span>
          <img src="../../assets/home/10.png" alt="" />
        </div>
      </div>
      <div class="major_list">
        <div
          class="major_list_item"
          v-for="(item, index) in zhuanye_list"
          :key="index"
          @click="goMajor(item.aid)"
        >
          <el-image :src="item.fengmiantu" :lazy="true" />
          <div class="major_list_item_text">{{ item.zhuanyemingcheng }}</div>
        </div>
      </div>
    </div>

    <!-- 就业喜报 -->
    <div class="obtain">
      <div class="title_infos" @click="goOutstand(1)">
        <div class="title_info_le">就业喜报</div>
        <div class="title_info_ri">
          <span>查看更多</span>
          <img src="../../assets/home/10.png" alt="" />
        </div>
      </div>
      <div class="obtain_list">
        <template v-for="(item, index) in xibao_list" :key="index">
          <outstandingGraduates :item="item"></outstandingGraduates>
        </template>
      </div>
    </div>

    <div class="obtain">
      <div class="title_infos" @click="goOutstand(2)">
        <div class="title_info_le">学员作品</div>
        <div class="title_info_ri">
          <span>查看更多</span>
          <img src="../../assets/home/10.png" alt="" />
        </div>
      </div>
      <div class="obtain_list">
        <template v-for="(item, index) in zuopin_list" :key="index">
          <studentWorks :item="item"></studentWorks>
        </template>
      </div>
    </div>
  </div>
  <footerPage></footerPage>
  <!-- 优惠券 -->
  <maskLayer v-model="visible" center append-to-body>
    <div class="coupon_content">
      <div class="coupon_title">
        <span>优惠券</span>
        <img @click="closeLayer" src="../../assets/login/9.png" alt="" />
      </div>
      <div class="coupon_view">
        <el-scrollbar class="scrollbar_info">
          <div class="coupon_top"></div>
          <div class="coupon_cell" v-for="(v, k) in 5" :key="k">
            <div class="coupon_item">
              <div class="item_left">
                <div class="item_left_1">¥</div>
                <div class="item_left_2">50</div>
              </div>
              <div class="item_center">
                <div class="item_center_1">满200元可使用</div>
                <div class="item_center_2">有效期至：2020-08-27 23:59:59</div>
              </div>
              <div class="item_right">
                <img src="../../assets/home/2.png" alt="" />
              </div>
            </div>
            <div class="coupon_item">
              <div class="item_left">
                <div class="item_left_1">¥</div>
                <div class="item_left_2">50</div>
              </div>
              <div class="item_center">
                <div class="item_center_1">满200元可使用</div>
                <div class="item_center_2">有效期至：2020-08-27 23:59:59</div>
              </div>
              <div class="item_right">
                <img src="../../assets/home/2.png" alt="" />
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </maskLayer>
</template>

<script name="home" setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import headPage from "@/components/headPage.vue";
import footerPage from "@/components/footerPage.vue";
import maskLayer from "@/components/maskLayer.vue";
import outstandingGraduates from "@/components/outstandingGraduates.vue";
import studentWorks from "@/components/studentWorks.vue";
import { post661f2abc82a0f } from "@/utils/api.js";
const router = useRouter();

onMounted(() => {
  initData();
});

// 首页信息
let message_list = reactive([]); // 顶部消息
let banner_list = reactive([]); //轮播图
let xinwen_list = reactive([]); //新闻列表
let zhuanye_list = reactive([]); //专业列表
let xibao_list = reactive([]); //喜报列表
let zuopin_list = reactive([]); //作品列表
let loading = ref(true);
function initData() {
  post661f2abc82a0f({})
    .then((res) => {
      // console.log(res);
      if (res.code == 1) {
        message_list = res.data.message_list;
        banner_list = res.data.banner_list;
        xinwen_list = res.data.xinwen_list;
        zhuanye_list = res.data.zhuanye_list;
        xibao_list = res.data.xibao_list;
        zuopin_list = res.data.zuopin_list;
        loading.value = false;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}

let visible = ref(false);
function closeLayer() {
  visible.value = false;
}

let scroll1 = ref(true);
let scroll2 = ref(true);

// 跳转学校动态
function goNewsDetails(aid) {
  router.push({
    path: "/newsDetails",
    query: {
      aid: aid,
    },
  });
}

// 跳转专业
function seeMajor() {
  router.push({
    path: "/major",
  });
}
// 跳转就业喜报
function goOutstand(type) {
  router.push({
    path: "/graduate",
    query: {
      type: type,
    },
  });
}
// 跳转新闻
function goNews() {
  router.push({
    path: "/news",
  });
}
// 选择专业跳转
function goMajor(id) {
  router.push({
    path: "/major",
    query: {
      id: id,
    },
  });
}
</script>

<style lang="scss" scope>
.boxContent {
  width: 100%;
  height: 391px;
  background: url(../../assets/home/7.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
  margin: 29.5px 0 0;
  z-index: 1;
  .student_list {
    padding: 80px 0 12px;
    width: 100%;
    overflow: hidden;
    .student_list_scroll {
      width: 100%;
      cursor: pointer;
      // display: flex;
      // align-items: center;

      .student_list_item {
        padding: 7px 12.5px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        color: #fff;
        font-size: 9px;
        margin-right: 13px;
      }
    }
  }
  .swiper_view {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .swiper_left {
      width: 515px;
      height: 240px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .swiper_right {
      width: 195px;
      height: 240px;
      .swiper_right_1 {
        width: 100%;
        height: 28px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        cursor: pointer;
        .swiper_right_1_1 {
          color: #fff;
          font-size: 12px;
          font-weight: bold;
        }
        .swiper_right_1_2 {
          color: #fff;
          font-size: 7px;
          font-weight: 500;
        }
        img {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          z-index: -1;
        }
      }
      .swiper_right_news {
        background: #fff;
        width: 100%;
        height: 212px;
        padding: 0 9px;
        overflow: hidden;
        .news_list_scroll {
          width: 100%;
          height: 240px;
          cursor: pointer;
          .news_list_item {
            padding: 10px 0;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;

            .news_list_item_le {
              width: calc(100% - 36px);
              font-size: 9px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-line-clamp: 1;
            }
            .news_list_item_ri {
              width: 33px;
              font-size: 7px;
              color: #999;
            }
          }
        }
      }
    }
  }
}
.title_infos {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 13px;
  .title_info_le {
    font-size: 14px;
    font-weight: bold;
  }
  .title_info_ri {
    display: flex;
    align-items: center;
    font-size: 10px;
    color: #999;
    cursor: pointer;
    img {
      width: 8px;
      height: 8px;
      margin-left: 4px;
    }
  }
}
.box_bottom {
  margin-bottom: 32px;
  margin-top: 20px;
}
.major {
  margin-bottom: 8px;
  .major_list {
    overflow: hidden;
    .major_list_item {
      float: left;
      width: 106.5px;
      margin-right: 16px;
      margin-bottom: 16px;
      cursor: pointer;
      img {
        width: 106.5px;
        height: 98px;
      }
      .major_list_item_text {
        text-align: center;
        color: #1f52ae;
        margin-top: 10px;
        font-size: 10px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
      }
    }
    .major_list_item:nth-child(6n + 6) {
      margin-right: 0;
    }
  }
}
.obtain {
  .obtain_list {
    overflow: hidden;
  }
}
.coupon_content {
  width: 418px;
  height: 236px;
  background: #fff;
  .coupon_title {
    width: 100%;
    height: 28px;
    background: #1f52ae;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 0 16px;
    img {
      width: 10px;
      height: 10px;
      cursor: pointer;
    }
  }
  .coupon_view {
    height: 208px;
    font-size: 8px;
    color: #666;
    .scrollbar_info {
      padding: 0 16px 0;
      .coupon_top {
        width: 100%;
        height: 30px;
      }
      .coupon_cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .coupon_item {
          width: 189px;
          height: 80px;
          background: url(../../assets/home/1.png) no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: space-between;
          margin-top: -21px;
          padding: 21px 8px 0 11.5px;
          .item_left {
            display: flex;

            .item_left_1 {
              color: #fa524c;
              font-size: 7.5px;
              transform: translateY(10px);
            }
            .item_left_2 {
              color: #fa524c;
              font-size: 17px;
            }
          }
          .item_center {
            .item_center_1 {
              font-size: 8px;
              font-weight: 500;
            }
            .item_center_2 {
              color: #7e7c7b;
              font-size: 6px;
              margin-top: 6px;
            }
          }
          .item_right {
            img {
              width: 30px;
              height: 30px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
